[iOS] 超簡単に処理中のUIを出せるSVProgressHUDについて

#iOS

#iPhone

SIN

2016.02.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

SVProgressHUDとは、タスクが進行中であることを簡潔に表示することができるUIです。このライブラリでは、このトップに表示されるビューをHUDと呼んでおり、ここでもそう呼ぶことにします。

SVProgressHUD on Appetize.io.においてデモを確認することができます。一発でイメージをつかめると思いますので、是非お試しください。

SVProgressHUDは、MITライセンスで公開されており、CocoaPodで簡単にインストールが可能です。

pod 'SVProgressHUD', :git => 'https://github.com/SVProgressHUD/SVProgressHUD.git'

参考：CocoaPodsによる、外部ライブラリの利用と作成

なお、2016年2月現在、GitHubのmasterの最新は、2.0-beta8です。 GitHubを指定しないで、Cocoapodsから落とすと、バージョンは、1.1.3となり、かなり機能不足ですので、GitHubのリポジトリ指定をお勧めします。

ライブラリの導入後は、下記のインポートで利用可能になります。

#import "SVProgressHUD.h"

2 HUDの表示

HUDの表示は、次のインスタンスメソッドで簡単に行うことができます。

showメソッドで、単純に表示します。

[SVProgressHUD show]; // インジケータのみ

文字を一緒に表示する場合は、showWithStatusを使用します。

[SVProgressHUD showWithStatus:@"Status"]; // 文字列付き

showProgressだと、指定角度(0.0〜1.0)までインジケータを進めます。

[SVProgressHUD showProgress:0.3]; // 指定分だけインジケータを進める
//[SVProgressHUD showProgress:0.3　status:@"Status"]; // 指定分だけインジケータを進める(文字付きはこちら)

この場合、上記のようにとまってしまうので、アプリで逐次進める必要があります。次のコードは、その一例です。

float progress;

- (IBAction)tapButton:(id)sender {
    progress = 0.1;
    [SVProgressHUD showProgress:progress];
    // 0.3秒後にintevalを呼ぶ
    [self performSelector:@selector(interval) withObject:nil afterDelay:0.3f];
}

- (void)interval {
    progress += 0.1f;// 数値を上げて
    [SVProgressHUD showProgress:progress]; // HUD表示

    if(progress < 1.0f){
        // 0.3秒後にintervelを呼ぶ
        [self performSelector:@selector(interval) withObject:nil afterDelay:0.3f];
    } else {
        // HUDを消す
        [SVProgressHUD dismiss];
    }
}

3 HUDの消去

dismissで直ちにHUDを消去します。

<br />  [SVProgressHUD dismiss]; // 直ちに消去
// [SVProgressHUD dismissWithDelay:0.5];　// 0.5秒後に消去

4 HUDのポップアップ

次のコードで、 HUDを一定時間ポップアップします。表示される時間は、0.5〜5秒間、指定したメッセージの長さに依存します。

<br />[SVProgressHUD showInfoWithStatus:(NSString *)@"Infomation"];

<br />[SVProgressHUD showErrorWithStatus:@"ERROR"];

<br />[SVProgressHUD showSuccessWithStatus:@"Success"];

<br />UIImage *image = [UIImage imageNamed:@"classmethod.png"];
[SVProgressHUD showImage:image status:@"Classmethod, Inc."];

5 スタイル

setDefaultStyleを使用してスタイルを変更できます。

<br />[SVProgressHUD setDefaultStyle:SVProgressHUDStyleDark];

指定できるのは、次の３種類です。

SVProgressHUDStyleLight // デフォルト
SVProgressHUDStyleDark
SVProgressHUDStyleCustom

最後のものSVProgressHUDStyleCustomを使用して、次の設定しました。

[SVProgressHUD setDefaultStyle:SVProgressHUDStyleCustom];
[SVProgressHUD setForegroundColor: [UIColor yellowColor]];
[SVProgressHUD setBackgroundColor: [UIColor redColor]];

6 マスク

setDefaultMaskTypeを使用して、HUDを表示している間の、バックの状態を指定できます。

[SVProgressHUD setDefaultMaskType:SVProgressHUDMaskTypeBlack];

指定できるのは、次の4種類です。

SVProgressHUDMaskTypeBlack
SVProgressHUDMaskTypeClear // バッグのUIは操作できない
SVProgressHUDMaskTypeGradient
SVProgressHUDMaskTypeNone 　//バッグのUIも操作できる

SVProgressHUDMaskTypeClearとSVProgressHUDMaskTypeNoneは、見た目は同じですが、バッグになっているUIを操作できるかどうか違いがあります。

6 アニメーション

setDefaultAnimationTypeを使用して、アニメメーションの種類を変更できます。

[SVProgressHUD setDefaultAnimationType:SVProgressHUDAnimationTypeNative];

指定できるのは、次の2種類です。

SVProgressHUDAnimationTypeFlat // デフォルト
SVProgressHUDAnimationTypeNative

7 カスタム

上記の他にも、次のようなメソッドが用意されており、きめ細かく設定できそうです。

// default is CGSizeZero, can be used to avoid resizing for a larger message
+ (void)setMinimumSize:(CGSize)minimumSize;                         
// default is 2 pt
+ (void)setRingThickness:(CGFloat)width;                            
// default is 18 pt
+ (void)setRingRadius:(CGFloat)radius;                              
// default is 24 pt
+ (void)setRingNoTextRadius:(CGFloat)radius;                        
// default is 14 pt
+ (void)setCornerRadius:(CGFloat)cornerRadius;                      
// default is [UIFont preferredFontForTextStyle:UIFontTextStyleSubheadline]
+ (void)setFont:(UIFont*)font;                                      
// default is [UIColor blackColor], only used for SVProgressHUDStyleCustom
+ (void)setForegroundColor:(UIColor*)color;                         
// default is [UIColor whiteColor], only used for SVProgressHUDStyleCustom
+ (void)setBackgroundColor:(UIColor*)color;                         
// default is the bundled info image provided by Freepik
+ (void)setInfoImage:(UIImage*)image;                               
// default is bundled success image from Freepik
+ (void)setSuccessImage:(UIImage*)image;                            
// default is bundled error image from Freepik
+ (void)setErrorImage:(UIImage*)image;                              
// default is nil, only used if #define SV_APP_EXTENSIONS is set
+ (void)setViewForExtension:(UIView*)view;                          
+ (void)setMinimumDismissTimeInterval:(NSTimeInterval)interval;

8 通知

SVProgressHUDでは、次の４種類の通知が実装されています。

SVProgressHUDWillAppearNotification //アニメーション開始
SVProgressHUDDidAppearNotification // アニメーション完了
SVProgressHUDWillDisappearNotification // アニメーションの消える前
SVProgressHUDDidDisappearNotification // アニメーションが消えた後

このNitificationを通信センターに登録しておくと、それぞれのタイミングで処理を記述することが可能になります。

- (void)viewDidLoad {
    [super viewDidLoad];

    [[NSNotificationCenter defaultCenter] addObserver: self selector: @selector(willDisappearNotification) name:SVProgressHUDWillDisappearNotification object: nil];
    [[NSNotificationCenter defaultCenter] addObserver: self selector: @selector(didDisappearNotification) name:SVProgressHUDDidDisappearNotification object: nil];
    [[NSNotificationCenter defaultCenter] addObserver: self selector: @selector(willAppearNotification) name:SVProgressHUDWillAppearNotification object: nil];
    [[NSNotificationCenter defaultCenter] addObserver: self selector: @selector(didAppearNotification) name:SVProgressHUDDidAppearNotification object: nil];
}

上記のようにNSNotificationCenterを設定すれば、下記のそれぞれのメソッドで通知を受け取ることができます。

<br />- (void) didDisappearNotification {
    NSLog(@"DidDisappearNotification");
}
- (void) willDisappearNotification {
    NSLog(@"WillDisappearNotification");
}
- (void) willAppearNotification {
    NSLog(@"DidDisappearNotification");
}
- (void) didAppearNotification {
    NSLog(@"DidAppearNotification");
}

画像をクリックすると動作が確認できます。